<template>
  <div>
    <el-form
      :model="dataForm"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="80px"
    >
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="dataForm.username" placeholder="登录帐号"></el-input>
      </el-form-item>
      <el-form-item label="电影院名字" prop="userName">
        <el-input
          v-model="dataForm.realName"
          placeholder="电影院名字"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="dataForm.email" placeholder="邮箱"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="dataForm.mobile" placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item label="屏幕类型" prop="hallType">
        <el-input v-model="dataForm.hallType" placeholder="屏幕类型"></el-input>
      </el-form-item>
      <el-form-item label="vip卡" prop="hallType">
        <el-input v-model="dataForm.vipTag" placeholder="vip卡"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="specificAddr">
        <el-row>
          <el-col :span="4">
            <el-form-item prop="operateId">
              <el-select
                clearable
                v-model="formData.proId"
                @change="proChange"
                placeholder="省"
              >
                <el-option
                  v-for="item in proList"
                  :key="item.proId"
                  :label="item.proName"
                  :value="item.proId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item prop="operateId">
              <el-select
                clearable
                v-model="formData.cityId"
                @change="cityChange"
                placeholder="市"
              >
                <el-option
                  v-for="item in cityList"
                  :key="item.cityId"
                  :label="item.cityName"
                  :value="item.cityId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item prop="operateId">
              <el-select
                clearable
                v-model="formData.dirId"
                @change="dirChange"
                placeholder="区"
              >
                <el-option
                  v-for="item in dirList"
                  :key="item.disId"
                  :label="item.disName"
                  :value="item.disId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        具体地址:
        <br />
        <el-input
          v-model="dataForm.specificAddr"
          placeholder="请填写具体地址(乡,镇,街道,门牌)"
        ></el-input>
      </el-form-item>
      <el-form-item label="退票状态" prop="endorse">
        <el-switch
          style="display: block"
          v-model="dataForm.endorse"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="可以退"
          inactive-text="不可以"
          :active-value="0"
          :inactive-value="1"
        >
        </el-switch>
      </el-form-item>
      <el-form-item label="改签状态" prop="allowRefund">
        <el-switch
          style="display: block"
          v-model="dataForm.allowRefund"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="可以退"
          inactive-text="不可以"
          :active-value="0"
          :inactive-value="1"
        >
        </el-switch>
      </el-form-item>
      
      <el-form-item label="是否有小吃" size="mini" prop="snack">
        <el-switch
          style="display: block"
          v-model="dataForm.snack"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="允许"
          inactive-text="禁止"
          :active-value="0"
          :inactive-value="1"
        >
        </el-switch>
      </el-form-item>
      <!-- <el-form-item label="可播电影" prop="movies">
        <el-button type="primary" @click="slotAppend">选择</el-button>
        <el-table :data="dataForm.moviesList">
          <el-table-column
            property="chName"
            label="中文名"
            width="150"
          ></el-table-column>
        </el-table>
      </el-form-item> -->
      <!-- <el-dialog
        width="30%"
        title="内层 Dialog"
        :visible.sync="innerVisible"
        append-to-body
        @close="beforeClose"
      >
        <el-table
          ref="multipleTable"
          :data="allMovies"
          @selection-change="selectionChangeHandle"
        >
          <el-table-column
            type="selection"
            header-align="center"
            align="center"
            width="50"
          ></el-table-column>
          <el-table-column
            property="chName"
            label="中文名"
            width="150"
          ></el-table-column>
        </el-table>
        <el-button type="primary" @click="modfiyMovies">确定</el-button>
      </el-dialog> -->
      <!-- <el-form-item label="状态" size="mini" prop="status">
        <el-switch
          style="display: block"
          v-model="dataForm.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="活跃"
          inactive-text="禁用"
          :active-value="1"
          :inactive-value="0"
        >
        </el-switch>
      </el-form-item> -->
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="init">重置</el-button>
      <el-button type="primary" @click="dataFormSubmit()">保存</el-button>
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      innerVisible: false,
      cityList: [],
        dirList: [],
        proList: [],
        allMovies: [],
        formData: { proId: "", dirId: "", cityId: "" },
        dataListSelections: [],
      dataForm: {
        
        name: "",
        mobile: "",
        addr: "",
        specificAddr: "",
        hallType: "",
        vipTag: "",
        snack: "",
        allowRefund: "",
        endorse: "",
        email: "",
      },
    };
  },

  mounted() {
    
    this.init();
  },
  watch: {
    "formData.proId": function (val) {
      this.formData.proId = val;
      if (!this.addVar) {
        this.formData.dirId = "";
        this.formData.cityId = "";
      }

      console.log("pro:" + this.formData.proId);
    },
    "formData.cityId": function (val) {
      if (!this.addVar) {
        this.formData.dirId = "";
      }
      this.formData.cityId = val;
      console.log("city:" + this.formData.cityId);
    },
    "formData.dirId": function (val) {
      this.addVar = false;
      this.formData.dirId = val;
      this.dataForm.address = val;
      console.log("dir:" + this.dataForm.address);
    },
  },
  methods: {
    beforeClose() {
      this.innerVisible = false;
      this.allMovies = {};
    },
    getProList() {
      this.$http({
        url: this.$http.adornUrl(`/area/tprovince/list/100000`),
        method: "get",
        params: this.$http.adornParams(),
      }).then(({ data }) => {
        this.proList = data.dataList;
        console.log(data);
      });
    },
    getCityList() {
      this.$http({
        url: this.$http.adornUrl(`/area/tcity/list/` + this.formData.proId),
        method: "get",
        params: this.$http.adornParams(),
      }).then(({ data }) => {
        this.cityList = data.dataList;
        console.log("city", data);
      });
    },
    getDirList() {
      this.$http({
        url: this.$http.adornUrl(
          `/area/tdistrict/list/` + this.formData.cityId
        ),
        method: "get",
        params: this.$http.adornParams(),
      }).then(({ data }) => {
        this.dirList = data.dataList;
        console.log(data);
      });
    },
    // 操作人选中项发生变化
    proChange(val) {
      console.log("pro操作", val);
      if (val) {
        let obj = {};
        // obj = this.operateOption.find(item => {
        //   //这里的operateOption就是上面遍历的数据源
        //   return item.value === val //筛选出匹配数据
        // })

        this.$set(this.formData, this.formData.proId, val);
        this.cityList = [];
        this.dirList = [];
        this.getCityList();
        // console.log('修改操作人名称', obj.label, obj.value)
      } else {
        this.$set(this.formData, this.formData.proId, "");
      }
    },
    dirChange(val) {
      console.log("dir操作", val);
      if (val) {
        let obj = {};
        // obj = this.operateOption.find(item => {
        //   //这里的operateOption就是上面遍历的数据源
        //   return item.value === val //筛选出匹配数据
        // })

        this.$set(this.formData, this.formData.dirId, val);
        // console.log('修改操作人名称', obj.label, obj.value)
      } else {
        this.$set(this.formData, this.formData.dirId, "");
      }
    },
    // 操作人选中项发生变化
    cityChange(val) {
      console.log("city操作", val);
      if (val) {
        let obj = {};
        // obj = this.operateOption.find(item => {
        //   //这里的operateOption就是上面遍历的数据源
        //   return item.value === val //筛选出匹配数据
        // })

        this.$set(this.formData, this.formData.cityId, val);
        this.dirList = [];
        this.getDirList();
        //清空
        // this.formData.operateName = obj.label
        // console.log('修改操作人名称', obj.label, obj.value)
      } else {
        // this.formData.operateName = ''
        console.log("city操作空");
        this.$set(this.formData, this.formData.cityId, "");
      }
    },
    init() {
     
      this.formData = { proId: "", dirId: "", cityId: "" };
      this.$http({
        url: this.$http.adornUrl(`/sys/user/infos`),
        method: "get",
        params: this.$http.adornParams(),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log(data.user);
          this.dataForm = data.user;
          this.dataForm.password = "";
          this.dataForm.comfirmPassword = "";
          this.getAddrs();
        }
      });
    },
    getAddrs() {
      this.$http({
        url: this.$http.adornUrl(
          "/area/tdistrict/addr/" + this.dataForm.address
        ),
        method: "get",
        params: this.$http.adornParams(),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.addVar = true;
          // console.log(data)
          this.getProList();
          console.log("1", data.addrs[0]);
          this.formData.proId = data.addrs[0];
          this.getCityList();
          console.log("2", data.addrs[1]);
          this.formData.cityId = data.addrs[1];
          this.getDirList();
          console.log("3", data.addrs[2]);
          this.formData.dirId = data.addrs[2];
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      console.log();
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/sys/user/updates`),
            method: "post",
            data: this.$http.adornData({
              username: this.dataForm.username,
              password: this.dataForm.password,
              salt: this.dataForm.salt,
              email: this.dataForm.email,
              mobile: this.dataForm.mobile,
              status: this.dataForm.status,
              address: this.dataForm.address,
              specificAddr: this.dataForm.specificAddr,
              endorse: this.dataForm.endorse,
              allowRefund: this.dataForm.allowRefund,
              hallType: this.dataForm.hallType,
              snack: this.dataForm.snack,
              movies: this.dataForm.movies,
              vipTag: this.dataForm.vipTag,
              realName: this.dataForm.realName,
              roleIdList: [2],
            }),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
             
              });
              // this.init();
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
  },
};
</script>

<style>
</style>